<template>
    <div> 
        <transition name="el-fade-in-linear">

            <div v-show='show'>

                <p style="color: #888888;padding: 0px 20px;margin:0;text-align:left">
                    管理员可根据场景，自由组织和配置各功能模块的开关。
                </p>

                <el-table :data="tableData" style="width: 60%;margin: 10px 10px">
                    <el-table-column prop="date" label="功能模块"></el-table-column>
                    <el-table-column prop="name" label="说明"></el-table-column>
                    <el-table-column prop="address" label="操作">
                        <template slot-scope="scope">

                            <el-switch
                                v-model="scope.row.ison"
                                active-color="#409EFF"
                                inactive-color="#dadfe6"
                                @change="open(scope.row.ison, scope.row.date)">
                            </el-switch>

                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </transition>
    </div>

</template>

<script>
export default {
    name: 'FunSwitch',
    
    data () {
        return {
            ison: true,
            show: false,
            tableData: [{
                date: '自动问答',
                name: '系统核心功能。基于 NLP 提供自动问答的咨询服务。默认启用',
                ison: true
            }, {
                date: '即时通讯',
                name: '可选安装的模块，实现了完整的即时通讯功能。如单聊、群聊、好友等，支持图片、音视频、emoji表情',
                ison: false
            }, {
                date: '私有化部署',
                name: '用于支持企业、学校或其他组织的私有化本地部署需求。基于容器实现了低配置的一键部署',
                ison: true
            }, {
                date: 'Wiki 编辑',
                name: '用户可自由编辑百科内容。内置完整的富文本编辑器。支持 Markdown 语法。',
                ison: true
            }]
        }
    },

    mounted() {
        this.show = true
    },

    methods: {
      open: function(ison, row) {
        
        this.$message({
          message: row + ' 已' + (ison ? '开启' : '关闭'),
          type: 'success',
          duration: 1000
        })
      }
  },


}
</script>